<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么</title>
    <!--    <link href="input.css" type="text/css" rel="stylesheet">-->
    <link href="output.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
          integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
          crossorigin="anonymous"/>
    <script src="js/carousel.js"></script>
    <!--    <script src="https://cdn.tailwindcss.com"></script>-->

</head>
<body>

<div class="bodyPad">

    <div class="mainPad">
        <div class="headPad">
            <div class="pl-4">
                <i class="fas fa-map-marker-alt"></i>
                呈贡大学城-云南大学
            </div>
            <div class="m-4">
                <input type="text" placeholder="搜索饿了么商家，商铺名称"/>
            </div>
        </div>
        <!--商品分类-->
        <div  class="cataMenu">
            <div class="grid grid-cols-5 gap-4 text-center">
                <a href="businessList.html">
                    <div>
                        <img src="images/沙拉.png">
                        沙拉
                    </div>
                </a>
                <a href="businessList.html">
                    <div>
                        <img src="images/面包.png">
                        面包
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/白菜.png">
                        白菜
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/奶茶.png">
                        奶茶
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/汉堡包.png">
                        汉堡包
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/蔬菜.png">
                        蔬菜
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/烧烤.png">
                        烧烤
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/水果.png">
                        水果
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/包心菜.png">
                        包心菜
                    </div>
                </a>
                <a href="businessList.html">
                    <div><img src="images/其他.png">
                        其他
                    </div>
                </a>
            </div>
        </div>
        <!--广告-->
        <div class="focus">
            <ul>
                <li><img src="images/外卖.jpg" alt=""></li>
                <li><img src="images/美食.jpg" alt=""></li>
                <li><img src="images/酒店.jpg" alt=""></li>
                <li><img src="images/外卖.jpg" alt=""></li>
                <li><img src="images/美食.jpg" alt=""></li>

            </ul>
            <!-- 小圆点 -->
            <ol>
                <li></li>
                <li class="current"></li>
                <li></li>
            </ol>
        </div>
        <!--商家推荐列表-->
        <div class="businessPad">
            <div class="titlePad">
                <span></span>
                商家列表
                <span></span>
            </div>
            <div class="searchBar ">
                <div>综合排序</div>
                <div>距离最近</div>
                <div>销量最高</div>
                <div>筛选</div>
            </div>
            <div class="businessList">
                <div class="businessCard">
                    <div>
                        <img src="images/汤达人.jpg" alt="">
                    </div>
                    <div class="businessBar">
                        <div>万家饺子</div>
                        <div>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            4.9月销售992
                        </div>
                        <div>￥15起送 | ￥3配送</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="barPad">
        <a href="index.html">
            <i class="fas fa-home"></i>
            <br/>
            首页
        </a>
        <a href="">
            <i class="fas fa-search"></i>
            <br/>
            发现
        </a>
        <a href="historicalOrder.html">
            <i class="fas fa-file-alt"></i>
            <br/>
            订单
        </a>
        <a href="login.html">
            <i class="fas fa-user"></i>
            <br/>
            我的
        </a>
    </div>
</div>

</body>
</html>
